<template>
  <div class="header-main">
    <div class="header-content fwwccwh">
      <div style="display: flex;" class="fwwccwh header-content-middle">
        <div class="" style="display:flex;">
          <div v-for="item in imglist" style="padding: 0px 10px;" class="fwwccwh">
            <img
              :src="'/configuration/logo/' + item + '.png'"
              alt
              class="titleimg"
              :style="titlelogostyleses"
            />
          </div>
        </div>
        <div :style="titletextstyleses">{{componentDetail.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import titlemixins from "@/mixins/bigScreen/titlemixins";

import commonmixins from '@/mixins/bigScreen/commonmixins';

export default {
  name: "commontitlelogotext",
  mixins: [commonmixins],
  components: {},
  props: {},
  data() {
    return {

    };
  },
  computed: {
    titlelogostyleses(){
      return {
        width: this.getscalepxc(30)
      }
    },
    titletextstyleses(){
      return {
        fontSize: this.getscalepxc(26)
      }
    },
    imglist() {
      return this.componentDetail.imgname.split("|");
    }
  },
  watch: {},
  mounted() {},
  methods: {}
};
</script>
<style lang='scss' scoped>
.titleimg {
  // width: var(--imgwidth);
}
.header-main {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  align-items: center;
  .header-content-middle {
    background-image: url("/configuration/logo/linglong/bg_bigtitle.png");

    width: fit-content;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;

    // background-position: 100% 100%;
    // background-repeat: no-repeat;

    // font-size: 80px;
    // width: 100%;
    // text-align: center;
    // padding: auto;
  }
}
</style>